<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>物流追溯</title>
  <link rel="stylesheet" href="src/css/iview.css">
  <link rel="stylesheet" href="src/css/vue-style.css">
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="vue-wrapper">
      <Collapse simple v-model="foldingPanel">
        <Panel name="1">
          <h2 class="ivu-icon ivu-icon-ios-book">物流情况</h2>
          <div slot="content">
            <div class="logistics-info">
              <ul>
                <li><span class="start"><i>起</i>{{ DepartureCity }}</span><em class="line"></em><span class="end"><i>终</i>{{
                    ArrivalCity }}</span></li>
                <li>运输/配送方式：<span>{{ FlightInfoGuid }}/{{ IsCollection }}</span></li>
                <li>物流订单号：<span>{{ TPLPoNo }}</span></li>
                <li>货主：<span>{{ CargoOwnerName }}</span></li>
                <li>签收时间：<span>{{ CompleteTime }}</span></li>
              </ul>
            </div>
            <div class="logistics-process">
              <dl>
                <dt class="logistics-process_icon passed">
                  <p>
                    <span>
                      <i class="ivu-icon ivu-icon-md-person"></i>
                    </span>
                  </p>
                </dt>
                <dd class="logistics-process_title">
                  <h3>货主</h3>
                  <p>{{ process.CargoOwnerName }}</p>
                </dd>
              </dl>
              <dl>
                <dt class="logistics-process_icon passed">
                  <p>
                    <span>
                      <i class="ivu-icon ivu-icon-md-person"></i>
                    </span>
                  </p>
                </dt>
                <dd class="logistics-process_title">
                  <h3>会员</h3>
                  <p>{{ process.member }}</p>
                </dd>
              </dl>
              <dl>
                <dt class="logistics-process_icon current">
                  <p>
                    <span>
                      <i class="ivu-icon ivu-icon-md-person"></i>
                    </span>
                  </p>
                </dt>
                <dd class="logistics-process_title">
                  <h3>承运商</h3>
                  <p>{{ process.carrier }}</p>
                </dd>
              </dl>
              <dl>
                <dt class="logistics-process_icon">
                  <p>
                    <span>
                      <i class="ivu-icon ivu-icon-md-person"></i>
                    </span>
                  </p>
                </dt>
                <dd class="logistics-process_title">
                  <h3>承运商</h3>
                  <p>{{ process.carrier2 }}</p>
                </dd>
              </dl>
              <dl>
                <dt class="logistics-process_icon">
                  <p>
                    <span>
                      <i class="ivu-icon ivu-icon-md-person"></i>
                    </span>
                  </p>
                </dt>
                <dd class="logistics-process_title">
                  <h3>网点</h3>
                  <p>{{ process.network }}</p>
                </dd>
              </dl>
              <dl>
                <dt class="logistics-process_icon">
                  <p>
                    <span>
                      <i class="ivu-icon ivu-icon-md-person"></i>
                    </span>
                  </p>
                </dt>
                <dd class="logistics-process_title">
                  <h3>收货方</h3>
                  <p>{{ process.receipt }} </p>
                </dd>
              </dl>
            </div>
            <ul class="logistics-process-detail">
              <detail-text :details="details"></detail-text>
              <li></li>
            </ul>
          </div>
        </Panel>
        <Panel name="2">
          <h2 class="ivu-icon ivu-icon-ios-book">配送信息</h2>
          <div slot="content">
            <div class="map-wrapper" ref="mapResize" :class="showMaxMap">
              <div id="mapContainer" class="map-container"></div>
              <i class="ivu-icon ivu-icon-md-resize" @click="mapZoom()"></i>
            </div>
          </div>
        </Panel>
      </Collapse>
    </div>
    <!-- 查看图片 -->
    <Modal v-model="imgModal" class="img-modal" width="800">
      <p slot="header"></p>
      <div style="text-align:center">
        <Carousel v-model="value3" :autoplay="setting.autoplay" :autoplay-speed="setting.autoplaySpeed" :dots="setting.dots"
          :radius-dot="setting.radiusDot" :trigger="setting.trigger" :arrow="setting.arrow" ref="carouse">
          <carousel-item v-for="item in detailsImg">
            <div class="demo-carousel">
              <img :src="item.imgPath" alt="">
            </div>
          </carousel-item>
        </Carousel>
      </div>
      <div slot="footer"></div>
    </Modal>
  </div>

  <script src="src/js/vue.js"></script>
  <script src="src/js/axios.min.js"></script>
  <script src="src/js/iview.min.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0IwGx8cSwb2kbtt0Pu42yu974w3mQrmh"></script>
  <script>
    Vue.component('detail-text', {
      props: ['details'],
      methods: {
        handleShow() {
          appLayout.imgModal = true,
          appLayout.$nextTick(() => {
            appLayout.$refs.carouse.handleResize()
            })
        }
      },
      template: `<ul>
        <li v-for="item in details">
          <span>{{ item.time }}</span>
          <p>{{ item.text }} <a class="ivu-icon ivu-icon-md-images" @click="handleShow" v-if="item.imgShow">{{ item.imgShow }}</a></p>
          <i></i>
        </li>
      </ul>`
    })
    var appLayout = new Vue({
      el: '#app',
      data: {
        DepartureCity: '武汉市',
        ArrivalCity: '沈阳市',
        FlightInfoGuid: '陆运',
        IsCollection: '平台配送',
        TPLPoNo: 'WL201810126401340004',
        CargoOwnerName: '搏力谋（武汉）阀门有限公司',
        CompleteTime: '2018/09/21 16:12:40',
        process: {
          CargoOwnerName: '搏力谋（武汉）阀门有限公司',
          member: '武汉链享医药供应链管理有限公司',
          carrier: '上海佳吉物流股份有限公司',
          carrier2: '上海佳吉物流股份有限公司（沈阳分公司）',
          network: '沈阳沈北路办',
          receipt: '沈阳铭德无双科技有限公司'
        },
        details: [
          {
            time: '2018/09/21 19:12:40',
            text: '货物已完成配送！签收人：前台，签收件数：100件。电子回单：单据数，',
            imgShow: '点击可查看'
          }, {
            time: '18:15:00',
            text: '货物已由【沈阳沈北路办】交接确认，请您准备收货。'
          }, {
            time: '16:12:40',
            text: '货物已与【沈阳沈北路办】进行中转交接，交接人：王东杰，交接件数：100件'
          }, {
            time: '16:12:40',
            text: '货物已完成提货交接，交接件数：100件，发往【上海佳吉物流股份有限公司（沈阳分公司）】，',
            imgShow: '点击可查看'
          }, {
            time: '18:15:00',
            text: '货物已由【沈阳沈北路办】交接确认，请您准备收货。'
          }, {
            time: '2018/09/20 12:12:20',
            text: '司机已受理，司机：李四，电话：13972309311，车牌：鄂A789123'
          }, {
            time: '11:12:20',
            text: '已排车'
          }, {
            time: '10:12:20',
            text: '配送派单受理'
          }, {
            time: '09:12:20',
            text: '货物已与【上海佳吉物流股份有限公司】进行中转交接，交接人：严明，交接件数：100件'
          }, {
            time: '2018/09/19 20:12:30',
            text: '货物已完成提货交接，交接件数：100件，发往【上海佳吉物流股份有限公司】，',
            imgShow: '点击可查看'
          }, {
            time: '18:42:30',
            text: '司机已受理，司机：李四，电话：13972309311，车牌：鄂A789123',
            imgShow: '点击可查看'
          }, {
            time: '16:12:30',
            text: '已排车'
          }, {
            time: '2018/09/18 16:12:30',
            text: '配送派单受理'
          }, {
            time: '15:12:30',
            text: '物流派单确认'
          }, {
            time: '14:22:30',
            text: '物流派单中'
          }, {
            time: '12:12:30',
            text: '物流集单中'
          }, {
            time: '10:12:30',
            text: '运营接单'
          }, {
            time: '08:15:30',
            text: '提交'
          }, {
            time: '08:12:20',
            text: '初始'
          }
        ],
        imgModal: false,
        value3: 0,
        setting: {
          autoplay: false,
          autoplaySpeed: 2000,
          dots: 'none',
          radiusDot: false,
          trigger: 'click',
          arrow: 'always'
        },
        detailsImg: [{
          imgPath: 'src/images/order.png'
        }, {
          imgPath: 'src/images/order2.png'
        }],
        foldingPanel: ['1', '2'],
        // styles: {}
        showMaxMap: ''
      },
      mounted() {
        // 百度地图API功能
        var map = new BMap.Map("mapContainer"); // 创建地图实例  
        var point = new BMap.Point(116.404, 39.915); // 创建点坐标  
        map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别  
        // map.enableScrollWheelZoom(true);    //开启鼠标滚轮缩放

        var p1 = new BMap.Point(116.301934, 39.977552);
        var p2 = new BMap.Point(114.279966, 30.606673);

        var driving = new BMap.DrivingRoute(map, {
          renderOptions: {
            map: map,
            autoViewport: true
          }
        });
        driving.search(p1, p2);

      },
      methods: {
        mapZoom() {
          let osTop = document.body.offsetHeight;
      
          if(this.showMaxMap){
            this.showMaxMap = '';
            this.$nextTick(function(){
              window.scrollTo(0, osTop);
            });
          } else{
            this.showMaxMap = 'maxMap';
            window.scrollTo({
              top: 0
            });          
          }
        }
      }
    })
  </script>
</body>

</html>